<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <style>
        .active {
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 2px 2px pink 5px;
            font-style: italic;
        }

        .selected {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="box">ZZC打CSGO</div>


    <script>
        // DOM操作元素核心的2大步：
        // 1、先找到要操作的元素节点
        // 2、后对节点进行操作
        //  2-1：内容操作
        //  2-2：样式操作：style行内样式、class类名
        //  2-3：属性操作
        //  2-4：绑定事件（单机、鼠标悬浮离开、获取焦点和失去焦点）、事件对象（event）
        //  2-5：删除、新增节点

        // 1、获取节点
        let divEle = document.getElementById('box');
        // 2、绑定事件
        divEle.addEventListener('click', function () {
            // this代表当前绑定事件的元素 this === divEle => true

            // a、内容操作
            this.innerText = '内容操作';
            this.innerHTML = '<s>内容操作</s>';

            // b、操作行内样式（小驼峰法）
            this.style.color = 'red';
            this.style.fontSize = '30px';

            // c、操作类名
            this.classList.add('active', 'selected');

            // d、操作属性
            this.setAttribute('title', '你在这吗？');
            this.setAttribute('a', '100');

        });

    </script>
</body>

</html>